import React, { useRef } from "react";

export default function App() {
  // let inputRef = null;

  // const inputRef = React.createRef();

  const inputRef = useRef();

  function handleClick() {
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <h1>App</h1>
      {/* 一、函数式组件中，不能使用 字符串 ref

        Function components cannot have string refs
      */}
      {/* <input type="text" ref="inputRef" /> */}

      {/* 二、函数式组件中，函数回调形式. 可以 */}
      {/* <input
        type="text"
        ref={(el) => {
          console.log("这是回调", el);
          inputRef = el;
        }}
      /> */}

      {/* 三、函数式组件中，使用 React.createRef() 可以 */}
      {/* <input type="text" ref={inputRef} /> */}

      {/* 四、函数式组件中，强烈推荐使用 hook useRef() */}
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>点我获取input的value值</button>
    </div>
  );
}
